<template>
    <div id="user_info">
        <div class="info_tittle">
            <h2>基本资料</h2>
        </div>
        <div class="info_content">
            <el-form :model="info" label-width="100px">
                <el-form-item label="账号：">
                    <el-input v-model="info.userEmail" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="昵称：">
                    <el-input v-model="info.nickname" :disabled="isEdit"></el-input>
                </el-form-item>
                <el-form-item label="性别：">
                    <el-autocomplete
                    class="inline-input"
                    v-model="info.gender"
                    :fetch-suggestions="querySearch"
                    @select="handleSelect"
                    placeholder="请输入性别"
                    :disabled="isEdit"
                    ></el-autocomplete>
                </el-form-item>
                <el-form-item label="个性签名：">
                      <el-input v-model="info.introduce" :disabled="isEdit"></el-input>
                  </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-if="isEdit" @click="isEdit = false">
                        <span class="iconfont">&#xe6f2;</span>
                        <span> 编辑</span>
                    </el-button>
                    <el-button type="danger" v-else @click="offEdit">
                        <i class="el-icon-close"></i>
                        <span> 取消编辑</span>
                    </el-button>
                    <el-button type="success" @click="saveEdit">
                        <span class="iconfont">&#xea3f;</span>
                        <span> 保存</span>
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { Message } from 'element-ui'
import { mapState } from 'vuex'
import { updateInfoService } from '@/api/user'
export default {
  data () {
    return {
      isEdit: true,
      info: {
        userEmail: '',
        nickname: '',
        gender: '',
        introduce: ''
      },
      gender: [
        { value: '男' },
        { value: '女' }]
    }
  },
  async created () {
    this.setInfo()
  },
  methods: {
    async setInfo () {
      await this.$store.dispatch('userStore/getBaseInfoService')
      this.info = this.baseInfo
      this.info.nickname = this.baseInfo.nickname || '高坚果遇上小土豆'
      this.info.introduce = this.baseInfo.introduce || '这个人很懒，没留下什么！'
    },
    querySearch (queryString, cb) {
      cb(this.gender)
    },
    handleSelect () {
      // console.log(this.info.gender)
    },
    async offEdit () {
      this.isEdit = true
      // TODO0: 重新调用获取用户信息函数
      this.setInfo()
      await Message.info('取消编辑')
    },
    async saveEdit () {
      this.isEdit = true
      // TODO1: 调用提交用户信息接口
      const res = await updateInfoService(this.info)
      if (res.status === 0) { await Message.success(res.message) }

      // TODO2: 重新调用获取用户信息函数
      this.setInfo()
    }

  },
  computed: {
    ...mapState('userStore', ['baseInfo'])
  },
  mounted () {
  }

}
</script>

<style lang="less" scoped>
.info_tittle{
    margin-top: 30px;
    text-align: center;
    color: #000;
}
.info_content{
    padding: 0 80px;
    /deep/ .el-form-item{
        margin: 50px auto;
        /deep/ .el-input__inner{
            border: 1px solid #ccc;
        }

    }
     /deep/ .el-button{
        margin: 0 50px;
        width: 30%
    }

}
</style>
